<template>
  <div class="org">
    <el-row :gutter="10">
      <el-col :sm="8" :xs="10">
        <div class="app-container">
          <div class="filter-container">
            <el-input
              v-model="name"
              :placeholder="$t('table.org.name')"
              class="filter-item search-item"
              clearable
            />
            <el-button
              style="background-color: #E05635;color: #fff;border-radius: 5px;border-color: #DCDFE6;"
              @click="search"
            >{{ $t('table.search') }}</el-button>
            <el-button
              style="background-color: #fff;color: #606266;border-radius: 5px;border-color: #DCDFE6;"
              @click="reset"
            >{{ $t('table.reset') }}</el-button>

          </div>
          <el-tree
            ref="orgTree"
            :check-strictly="true"
            :data="orgTree"
            :filter-node-method="filterNode"
            default-expand-all
            highlight-current
            node-key="id"
            show-checkbox
            @node-click="nodeClick"
          />
        </div>
      </el-col>
      <el-col :sm="16" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>作业范围</span>
          </div>
          <div>
            <!--baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">

            </baidu-map>-->
            <div id="allmap" class="allmap"></div>
          </div>
        </el-card>

      </el-col>
    </el-row>
  </div>
</template>
<script>
import { BMPGL } from "../../../bmpgl.js"
import orgApi from '@/api/Org.js'
export default {
  name: 'OrgManager',
  data() {
    return {
      name: '',
      orgTree: [],
      org: this.initOrg(),
      rules: {
        name: [
          {
            required: true,
            message: this.$t('rules.require'),
            trigger: 'blur'
          },
          {
            min: 1,
            max: 255,
            message: this.$t('rules.range3to10'),
            trigger: 'blur'
          }
        ]
      },
      ak: "0Si7LFMemyjvY6bK4LtUsufGG32m2PqV", // 百度的地图密钥
      areas:[]
    }
  },
  mounted() {
    this.initMap()
    this.initOrgTree()
  },
  methods: {
     initMap() {
       // 创建地图实例
      // 传入密钥获取地图回调。
      BMPGL(this.ak).then((BMapGL) => {
        var map = new BMapGL.Map("allmap");
        // 创建点坐标 axios => res 获取的初始化定位坐标
          var point = new BMapGL.Point(116.397128, 39.916527);
          // 初始化地图，设置中心点坐标和地图级别
          map.centerAndZoom(point, 15);

         /* var polygon = new BMapGL.Polygon([
            new BMapGL.Point(112.90619599999997,28.13452600034993),
            new BMapGL.Point(112.90419599999997,28.136526000426915),
            new BMapGL.Point(112.90345024981329,28.13849207007679),
            new BMapGL.Point(112.89841093358879,28.139083667021506),
            new BMapGL.Point(112.8964553891485,28.136514365348003)
          ], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});*/
        ////开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true)
        map.setHeading(64.5)
        map.setTilt(73)
        map.addOverlay(point);


        // 保存数据
      })
      .catch((err) => {
        console.log(err)
      })
    },
    queryMap() {
       // 创建地图实例
      // 传入密钥获取地图回调。
      BMPGL(this.ak).then((BMapGL) => {
        var map = new BMapGL.Map("allmap");
        // 创建点坐标 axios => res 获取的初始化定位坐标
          //var point = new BMapGL.Point(this.org.longitude,this.org.latitude);
          var point = new BMapGL.Point(112.9061959999999,28.13452600034993);
          // 初始化地图，设置中心点坐标和地图级别
          map.centerAndZoom(point, 15);
          var points=[];
          this.areas.forEach(area => {
            var aa=area.mutiPoints.split(",");
            console.log(aa)
            points.push(new BMapGL.Point(aa[0],aa[1]))
          })
            console.log(points)
           /* var points=[
              new BMapGL.Point(112.90619599999997,28.13452600034993),
              new BMapGL.Point(112.90419599999997,28.136526000426915),
              new BMapGL.Point(112.90345024981329,28.13849207007679),
              new BMapGL.Point(112.89841093358879,28.139083667021506),
              new BMapGL.Point(112.8964553891485,28.136514365348003)

          ];*/

          var polygon = new BMapGL.Polygon(points, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});
        ////开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true)
        map.setHeading(64.5)
        map.setTilt(73)
        map.addOverlay(polygon);


        // 保存数据
      })
      .catch((err) => {
        console.log(err)
      })
    },
    initOrg() {
      return {
        id: '',
        abbreviation: '',
        name: '',
        parentId: 0,
        status: true,
        describe: '',
        sortValue: 0
      }
    },
    initOrgTree() {
      orgApi.allTree({}).then(response => {
        const res = response.data
        //console.log(response.data)
        const newRes=res.map(function(currentValue){
          currentValue.label=currentValue.name

          var child=currentValue.children;
            if(child!=null){

              var newChilds=child.map(function(currentValue){
              //var org=currentValue;
                  currentValue.label=currentValue.name
                  var child=currentValue.children;
                  if(child!=null){
                      var newMinChilds=child.map(function(minChild){
                      //var org=currentValue;
                          // alert(minChild.id)

                          minChild.label=minChild.name
                          return minChild;
                      })
                      currentValue.children=newMinChilds;
                  }
                  return currentValue;
              })
              currentValue.children=newChilds;
          }

          return currentValue;
        })
        this.orgTree = newRes;
      })
    },

    exportExcel() {
      this.$message({
        message: '待完善',
        type: 'warning'
      })
      // this.$download('system/org/excel', {
      //   name: this.name
      // }, `org_${new Date().getTime()}.xlsx`)
    },
    handleNumChange(val) {
      this.org.sortValue = val
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    nodeClick(data) {
      this.org = { ...data }
      if(this.org.orgType==4){
        orgApi.findAllAgencyScope({"id":this.org.id}).then(response => {
           this.areas=response.data.areas;
           this.queryMap();
        })
      }
    },
    search() {
      this.$refs.orgTree.filter(this.name)
    },
    reset() {
      this.initOrgTree()
      this.name = ''
      this.resetForm()
    },
    resetForm() {
      this.$refs.form.clearValidate()
      this.$refs.form.resetFields()
      this.org = this.initOrg()
    },
     handler ({BMap, map}) {
          //let me = this;
          console.log(BMap, map)
          // 鼠标缩放
          map.enableScrollWheelZoom(true);
          // 点击事件获取经纬度
          map.addEventListener('click', function (e) {
              console.log(e.point.lng, e.point.lat)
          })
      }
  }
}
</script>
<style lang="scss">
.addEdit {
  background-color: #e05635;
  color: #fff;
  border-radius: 5px;
  &:hover {
    background-color: #e05635;
    color: #fff;
    border-color: #dcdfe6;
  }
}
.org {
  margin: 10px;
  .app-container {
    margin: 0 0 10px 0 !important;
  }
}
.el-card.is-always-shadow {
  box-shadow: none;
}
.el-card {
  border-radius: 0;
  border: none;
  .el-card__header {
    background: #f8faff;
    // padding: 10px 20px !important;
    border-bottom: 0px solid #e6ebf5;
  }
  .map {
        width: 100%;
        height: 450px;
    }
  .allmap {
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 1;
  }
}
</style>
